<template>
	<view>
		<u-navbar :title="name" :title-size="36" title-color="#fff" back-icon-name="arrow-leftward"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<!-- <ul>
				<li @click="StimeFlag = true"><label>开始时间: </label><span>{{Stime}}</span></li>
				<li @click="EtimeFlag = true"><label>结束时间: </label> <span>{{Etime}}</span></li>
			</ul>
			<a class="search" @click="search">查询</a> -->
			<u-picker v-model="StimeFlag" mode="time" @confirm="confirmStime" :params="timeParams" :default-time="Stime"></u-picker>
			<u-picker v-model="EtimeFlag" mode="time" @confirm="confirmEtime" :params="timeParams" :default-time="Etime"></u-picker>

			<div v-if="!noData" id="echarts" ref="monitoringCurve" style="width: 100%;height:900rpx;"></div>
			<span v-else class="noData">暂无数据</span>
		</view>
	</view>
</template>

<script>
	import echarts from '../../assets/js/echarts.min.js'
	export default {
		name: 'monitorCurve',
		props: {

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.code = option.code
			this.name = option.name
		},
		data() {
			return {
				background: {
					backgroundColor: '#277fe6',
				},
				name: '',
				StimeFlag: false,
				EtimeFlag: false,
				Stime: '',
				Etime: '',
				code: '',
				noData: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				option : {
					grid: {
						top: "18%",
						left: "10%",
						right: "10%"
					},
					tooltip: {
						trigger: "axis",
						backgroundColor: "#000",
						padding: [10, 30],
						borderWidth: 1,
						borderColor: "#000",
						textStyle: {
							color: "#e2f1fe"
						},
					},
					dataZoom: {
						show: true,
						height: 14,
						bottom: 10,
						borderColor: 'transparent',
						backgroundColor: '#e2e2e2',
						// 拖拽手柄样式 svg 路径
						handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
						handleColor: '#aab6c6',
						handleSize: 20,
						handleStyle: {
							borderColor: '#aab6c6',
							shadowBlur: 4,
							shadowOffsetX: 1,
							shadowOffsetY: 1,
							shadowColor: '#e5e5e5'
						},
						start: 0,
						end: 96
					},
					legend: {
						// data: ["落雁河","鹿溪河","柴桑河","府河"],
						left: "center",
						padding: [20, 80, 0, 0],
						textStyle: {
							color: '#000'
						},
						icon: 'rect',
						itemHeight: 6,
						itemWidth: 16,
						itemGap: 30,
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: [],
						axisLine: {
							//x轴的深色轴线
							show: true,
							lineStyle: {
								color: ["#666"] //x轴边框颜色
							}
						},
						axisLabel: {
							// rotate:40,
							textStyle: {
								color: "#000",
							},
							formatter: function(value) {
								let replace = value.replace(" ", "\n");
								return replace;
							}
						},
						splitLine: {
							//终于找到了，背景图的内置表格中“边框”的颜色线条  这个是x轴的竖线
							show: true,
							lineStyle: {
								color: "#666",
								type: "dashed"
							}
						}
					},
					yAxis: [{
						name: "流量(m³/s)",
						type: "value",
						position: "left",
						// max: function(value) {//取最大值向上取整为最大刻度
						//     return  Math.ceil(value.max) * 1.5
						// },
						nameTextStyle: {
							color: '#000',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#666",
								type: "dashed"
							}
						},
						axisLine: {
							//y轴的深色轴线，如图2
							show: true,
							lineStyle: {
								color: "#666"
							}
						},
						axisLabel: {
							textStyle: {
								color: "#000",
							},
							formatter: "{value}"
						}
					}],
					series: [{
							name: "实时",
							type: "line",
							data: [],
							showSymbol: true,
							symbol: "circle",
							smooth: false, //true 为平滑曲线，false为直线
							symbolSize: 3,
							itemStyle: {
								normal: {
									color: "#11AEFF"
								}
							},
						},
						{
							name: "1小时",
							type: "line",
							data: [],
							showSymbol: true,
							symbol: "circle",
							smooth: false, //true 为平滑曲线，false为直线
							symbolSize: 3,
							itemStyle: {
								normal: {
									color: "#7AAC6B"
								}
							},
						},
						{
							name: "3小时",
							type: "line",
							data: [],
							showSymbol: true,
							symbol: "circle",
							smooth: false, //true 为平滑曲线，false为直线
							symbolSize: 3,
							itemStyle: {
								normal: {
									color: "#CEA854"
								}
							},
						},
						{
							name: "6小时",
							type: "line",
							data: [],
							showSymbol: true,
							symbol: "circle",
							smooth: false, //true 为平滑曲线，false为直线
							symbolSize: 3,
							itemStyle: {
								normal: {
									color: "#C45A5F"
								}
							},
						}
					],
					noDataLoadingOption: {
						text: "暂无数据",
						effect: "bubble",
						effectOption: {
							effect: {
								n: 0
							}
						}
					}
				}
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			confirmStime(data) { //点击开始时间控件确定按钮赋值
				this.Stime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			confirmEtime(data) { //点击开始时间控件确定按钮赋值
				this.Etime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			search() {
				this.getCurve()
			},
			initChart() {
				var myChart = echarts.init(document.getElementById('echarts'));
				myChart.setOption(this.option);
			},
			getCurve() {
				uni.showLoading({
					title: '加载中',
				});
				var param = {
					code: this.code
				};
				this.$api.reqApi.lineSw(param).then(res => {
					uni.hideLoading();
					if (res[0].times.length > 0) {
						this.noData = false;
						this.$nextTick(() => {
							var myChart = echarts.init(document.getElementById('echarts'));
						    this.option.series[0].data = res[0].values;
						    this.option.series[1].data = res[1].values;
						    this.option.series[2].data = res[2].values;
						    this.option.series[3].data = res[3].values;
						    this.option.xAxis.data = res[0].times;
							 myChart.setOption(this.option);
						})
					} else {
						this.noData = true
					}
				})
			},

		},
		mounted() {
			console.log(this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')); //获取当前时间的年月日 并赋值
			console.log(this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')); //获取当前时间的时分秒 并赋值
			this.Stime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + '00:00:00'
			this.Etime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
			this.getCurve()
		}
	}
</script>

<style lang="scss" scoped>
	ul {
		padding: 0 30rpx;
		border-bottom: 1px solid #ddd;
		padding-bottom: 30rpx;
		margin-top: 30rpx;

		li {
			margin-top: 20rpx;

			label {
				color: #727272;
				margin-right: 4px;
			}

			label,
			span {
				font-size: 30rpx;
			}
		}
	}

	.search {
		text-align: center;
		color: #fff;
		display: block;
		margin-top: 30rpx;
		background-color: #007AFF;
		width: 200rpx;
		margin: 0 auto;
		line-height: 68rpx;
		border-radius: 4px;
		margin-top: 30rpx;
	}
</style>
